<template>
  <XnDialog
    custom-class="add-account-dialog"
    :title="isEdit ? '编辑职位信息' : '添加职位信息'"
    :visible.sync="selfVisible"
    @close="closeDialog">
    <el-form ref="accountForm" :model="accountForm" :rules="rules" label-position="top" size="small">
      <el-scrollbar>
        <div class="row-item">
          <div class="col-item">
            <el-form-item label="职位名称" prop="postName">
              <el-input
                v-model.trim="accountForm.postName"
                autocomplete="off"
                :maxlength="100"
                show-word-limit
                clearable
                placeholder="请输入"
                type="textarea"></el-input>
            </el-form-item>
          </div>
          <div class="col-item">
            <el-form-item label="职位简称" prop="postAlias">
              <el-input
                v-model.trim="accountForm.postAlias"
                name="phone"
                autocomplete="off"
                :maxlength="100"
                show-word-limit
                clearable
                placeholder="请输入"
                type="textarea"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row-item">
          <div class="col-item">
            <el-form-item label="职级编码" prop="postCode">
              <el-input
                v-model.trim="accountForm.postCode"
                autocomplete="off"
                :maxlength="100"
                show-word-limit
                clearable
                placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="col-item">
            <el-form-item label="职级序列" prop="postLevel-">
              <el-select v-model="accountForm.postLevel" placeholder="请选择">
                <el-option
                  v-for="item in postLevelList"
                  :key="item.code"
                  :label="item.name"
                  :value="Number(item.code)"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row-item">
          <div class="col-item">
            <el-form-item label="所属机构" prop="relationOrg">
              <OrganTreeSelect
                :flat="true"
                v-model="accountForm.relationOrg"
                multiple
                :tenantId.sync="accountForm.tenantId"></OrganTreeSelect>
            </el-form-item>
          </div>
          <div class="col-item">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model.trim="accountForm.remark"
                type="textarea"
                placeholder="请输入"
                maxlength="200"
                show-word-limit></el-input>
            </el-form-item>
          </div>
        </div>
      </el-scrollbar>
      <div class="btn-box">
        <el-button size="small" @click.stop="closeDialog">取消</el-button>
        <el-button size="small" type="primary" @click.stop="onFormSave">确定</el-button>
      </div>
    </el-form>
  </XnDialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'
import { listRoleData, listCodeData, getUiasPostDetail } from '@api/modules/system.js'
import { cloneDeep } from 'lodash'
import OrganTreeSelect from '@com/OrganTreeSelect.vue'

export default {
  name: 'LogDialog',
  components: { XnDialog, OrganTreeSelect },
  emits: ['close', 'submit'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selfVisible: false,
      accountForm: {
        id: '',
        roleIds: [],
        postName: '',
        postAlias: '',
        postCode: '',
        postLevel: '',
        postId: '',
        relationOrg: '',
        tenantId: '',
      },
      rules: {
        postName: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
        postAlias: [{ required: true, message: '请输入职位简称', trigger: 'blur' }],
        postCode: [{ required: true, message: '请输入职级编码', trigger: 'blur' }],
        postLevel: [{ required: true, message: '请选择职级编码', trigger: 'change' }],
        relationOrg: [{ required: true, message: '请选择所属机构', trigger: 'change' }],
      },
      roleList: [],
      editPass: false,
      postLevelList: [],
    }
  },
  watch: {
    visible(bool) {
      this.selfVisible = bool
      if (bool) {
        this.onAddEdit(this.info)
      }
    },
  },
  computed: {
    isEdit() {
      return this.info && this.info.id
    },
  },
  methods: {
    async getRoleList() {
      const { status, data } = await listRoleData()
      if (status === 200 && data && data.length) {
        this.roleList = data
      } else {
        this.roleList = []
      }
    },
    closeDialog() {
      this.$refs.accountForm && this.$refs.accountForm.resetFields()
      this.selfVisible = false
      this.editPass = false
      this.accountForm = {
        id: '',
        roleIds: [],
        postName: '',
        postAlias: '',
        postCode: '',
        postLevel: '',
        postId: '',
      }
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    onFormSave() {
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          this.$emit('submit', cloneDeep(this.accountForm))
          this.closeDialog()
        }
      })
    },
    /* 初始化参数配置 */
    initListCodeDatadata(codeType) {
      listCodeData(codeType).then(res => {
        if (res.status === 200) {
          if (codeType === 'post_level') {
            this.postLevelList = res.data
          }
        }
      })
    },
    /* 创建编辑 */
    onAddEdit(data) {
      this.initListCodeDatadata('post_level')
      if (this.$refs.accountForm) {
        this.$refs.accountForm.resetFields()
      }
      this.$set(this.accountForm, 'id', '')
      this.$set(this.accountForm, 'postId', '')
      if (data.id) {
        /* 查询详情 */
        const id = data.postId
        getUiasPostDetail(id).then(res => {
          if (res.status === 200) {
            this.accountForm = { ...this.accountForm, ...res.data }
          }
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.add-account-dialog {
  ::v-deep &.el-dialog {
    width: 750px;

    .el-form {
      .el-scrollbar {
        height: 100%;
      }
      .row-item {
        width: 100%;
        display: flex;
        align-items: center;

        .col-item {
          width: 50%;
          margin-right: 20px;
          position: relative;

          &:last-of-type {
            margin-right: 0px;
          }
        }
      }

      .el-input,
      .el-select {
        width: 100%;
      }

      .pwd-eye-view {
        cursor: pointer;
        margin-top: 8px;
        display: inline-block;
      }

      .btn-box {
        text-align: right;
        margin-top: 20px;
        border-top: 1px solid #dedede;
        padding-top: 20px;
      }
    }
    .vue-treeselect__menu-container {
      z-index: 9999 !important;
      .vue-treeselect__menu {
        max-height: 200px !important;
      }
    }
  }
}
</style>
